<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>编辑媒体图片</title>
<link href="../../public/ImageMagic_files/cssreset.css" rel="stylesheet" type="text/css" />
<link href="../../public/ImageMagic_files/main.css" rel="stylesheet" type="text/css" />
</head>

<body style="position: static;">
	<!--[if lte IE 9]>
		<script type="text/javascript">
			  document.getElementsByTagName('body')[0].innerHTML = '';
			  alert('该浏览器不支持canvas API,请使用firefox3.6+，IE9+，chrome2.0+,Opera10+浏览器。');
		</script>
	<![endif]-->
	<script type="text/javascript"  src="../../public/ImageMagic_files/ga.js"></script>
	<script type="text/javascript">
		this.imageMagic || (imageMagic = {});
	</script>
	<script type="text/javascript" >
	! function(window,undefined){


		var doc,toolkit,IM;
		IM= imageMagic;
		IM.config || (IM.config={});
		IM.module || (IM.module={});
		IM.config={
			toolbar :'toolbar',
			leftSidebar :'leftSidebar',
			canvasContainer :'canvasContainer',
			importImage :'importImage',
			gallery : 'gallery',
			imageList : 'imageList',
			galleryTitle : 'galleryTitle',
			galleryMassage : 'galleryMassage',
	        revoke : 'revoke',
			Enter :'Enter',
			filter : 'filter',
			filters : 'imageFilter',
			galleryPost:'galleryPost',
			workSpace : {
				Function:['clip','scale','rotate','mark'],
				button :[
					'Button_clip',
					'Button_scale',
					'Button_rotate',
					'Button_mark'	
				],
				//
				tab:{t:'control',s:'leftSidebar',tag:'h3'},
				control : { id:'accordion' ,tag :'h3'},/**/
				addSize : 'addSize',
				zoom:0.08,//滚轮缩放系数
				clipDeafult :'clipDeafult',
				scaleLock :false,//开启此项，宽或高等于画布宽或高时停止缩放
				scaleType : 200, //放大界限 200%
				scaleDataSize : false, //是否显示缩放后文件量大小,为了保证鼠标滚轮缩放流程度建议关闭此项
				rotateHandler : 'rotateHandler' ,
				watermarkCon  : 'watermarkCon',
				watermarkControl  : 'watermarkControl',
				watermarkCancel : 'watermarkCancel',
				watermarkOP : 'watermarkOpacity',
				watermarkOpacity :50//水印默认不透明度
			},
			areaSize : [120,120],//剪裁框默认尺寸
			imageLoader:{
				id:'imageLoader',
				loader:'imWebLoader',
				natives:'imLoaderNative',
				web:'imLoaderWeb',
				btn:'imageLoaderBtn',
				dataSize:2048000,
				reg :{
					natives:/\.(jpg|jpeg|png)$/i,
					web:/^http:\/\/.+\.(jpg)$/i
				}
			},
			dataURL : {
				'clientAreaSize' : {url:'',param:{method:''}},
				'clipSize' : {url:'',param:{channel:'',method:''}},
				'waterMark' : {url:'',param:{channelid:'',method:''}},
				'proxyImage' : {url:'',param:{'method':''}},
				'postImage' : {url:'save_media_draft_pic?media_draft_id=<?php echo $media_draft_info['media_draft_id']?>'} 
			},
			jumpURL : {
				'':'',
				'':''
			}
		};
	}(window);
	</script>
	<script type="text/javascript" src="../../public/ImageMagic_files/toolkit.js"></script>
	<script type="text/javascript" src="../../public/ImageMagic_files/module_workSpace.js"></script>
	<script type="text/javascript" src="../../public/ImageMagic_files/module_clip.js"></script>
	<script type="text/javascript" src="../../public/ImageMagic_files/module_accordion.js"></script>
	<script type="text/javascript" src="../../public/ImageMagic_files/module_animate.js"></script>
	<script type="text/javascript" src="../../public/ImageMagic_files/module_ajax.js"></script>
	<script type="text/javascript" src="../../public/ImageMagic_files/module_dailog.js"></script>
	<script type="text/javascript" src="../../public/ImageMagic_files/module_filters.js"></script>
	<script type="text/javascript" src="../../public/ImageMagic_files/init.js"></script>
	<header id="toolbar" class="box topTool"> 
	<nav id="tools">
		<p id="save">
			<input type="button" value="滤镜" id="filter"> 
			<input type="button" value="取消滤镜" id="revoke"> 
			<input type="button" value="完成编辑 " id="Enter">
		</p>
	</nav> 
	</header>
	<div id="workSpace" class="box">
		<aside id="leftSidebar" style="height: 531px;">
		<div id="accordion">
			<h3 id="IM_clip">
				<img src="../../public/ImageMagic_files/t1.png" width="16" height="16">剪裁 
			</h3>

			<div id="clip" style="display: none;">
				<!--<h5>使用常用设置 <b>编辑</b></h5>-->
				<table width="200" border="0" cellpadding="0" cellspacing="0">
					<tbody>
						<tr>
							<td align="left"><input type="radio" id="clipRadioDefault"
								checked="checked" name="clipSize"><label
									for="clipRadioDefault">常用尺寸</label></td>
							<td><select id="clipDeafult">
									<option disabled="">---请选择---</option>
									<option>400*300</option>
									<option>800*600</option>
									<option>1200*900</option>
							</select></td>
						</tr>
						<tr>
		                        <td align="left" valign="top"><input type="radio" id="clipRadioClient" name="clipSize"><label
		                                for="clipRadioClient">自定义尺寸</label></td>
		                        <td>
		                            宽:<input size="3" type="text" value="100" id="clipClientWidth"/>
		                            像素
		                            <br/>
		                            高:<input size="3" type="text" value="100" id="clipClientHeight"/>
		                            像素
		                        </td>
		                    </tr>
		                    <tr>
		                        <td>
		
		                        </td>
		                        <td>
		                            <b id="addSize" style="display: none;">收藏到常用尺寸</b>
		                        </td>
                    </tr>
				</table>
				<hr>
					<div align="center">
						<input type="button" value="确认剪裁 " id="Button_clip" title="确认剪裁 " class="">
					</div>
			</div>
			<h3 id="IM_scale">
				<img src="../../public/ImageMagic_files/t2.png" width="16" height="16">缩放 
			</h3>

			<div id="scale" style="display: none;">
				<table width="100%" border="0" cellspacing="0" cellpadding="0">
					<tbody>
						<tr>
							<td align="right" valign="top">缩放比例：</td>
							<td>
								<form>
									宽度：<input id="scaleCW" type="text" autocomplete="off" value="100" size="4"> %<br> 
									高度：<input id="scaleCH" type="text" autocomplete="off" value="100" size="4"> %<br> 
									<input type="checkbox" id="scaleLocked" checked="checked"> 锁定比例
									<input type="reset" value=" 重置 " id="scaleRest">
								</form>
							</td>
						</tr>
						<tr>
							<td align="right" valign="top">实际尺寸：</td>
							<td>
								<form>
									宽度：<span id="scaleDW"></span> 像素<br> 
									高度：<span id="scaleDH"></span> 像素<br>
								</form>
							</td>

						</tr>
					</tbody>
				</table>

				<table width="100%" border="0" cellspacing="0" cellpadding="0">
					<tbody>
						<tr>
							<td align="right" id="scaleDS"></td>
						</tr>
						<tr>
							<td align="right" id="scaleCS"></td>
						</tr>
					</tbody>
				</table>
				<hr>
					<div align="center">
						<input type="button" value="确认缩放" id="Button_scale" title="确认缩放 ">
					</div>
			</div>
			<h3 id="IM_rotate">
				<img src="../../public/ImageMagic_files/t3.png" width="16" height="16">
					旋转 
			</h3>

			<div id="rotate" style="display: none;">
				<ul id="rotateHandler">
					<li><img src="../../public/ImageMagic_files/scale_l.gif" width="103" height="38" alt="l"></li>
					<li><img src="../../public/ImageMagic_files/scale_r.gif" width="103" height="38" alt="r"></li>
					<!--<li><img src="images/scale_m.gif" width="103" height="38" alt="v" /></li>
               <li><img src="images/scale_v.gif" width="103" height="38" alt="h" /></li>-->
				</ul>
				<div id="Button_rotate"></div>
			</div>
			<h3 id="IM_mark" class="accordionHandler">
				<img src="../../public/ImageMagic_files/t4.png" width="16" height="16">水印 
			</h3>
			<div id="watermark" style="display: none;">
				<h5>请选择水印</h5>
				<div id="watermarkCon">
					<ul>
					</ul>

				</div>
				<div id="watermarkConfig">
					<!--<table width="100%" border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <td align="right">不透明度:</td>
                            <td><input type="text" min="1" max="100" autocomplete="off" value="50" size="5" id="watermarkOpacity"/>%</td>
                        </tr>
                        <tr>
                            <td></td>
                            <td></td>
                        </tr>
                    </table>-->
					<h5>水印位置:</h5>
					<div id="watermarkControl">
						<table width="100" border="0" cellspacing="0" cellpadding="0">
							<tbody>
								<tr>
									<td><input type="button" id="wmTL" value=" ↖ " class=""></td>
									<td><input type="button" id="wmTC" value=" ↑ " class=""></td>
									<td><input type="button" id="wmTR" value=" ↗ " class=""></td>
								</tr>
								<tr>
									<td><input type="button" id="wmCL" value=" ← " class=""></td>
									<td><input type="button" id="wmCC" value="   "
										class="markPosition"></td>
									<td><input type="button" id="wmCR" value=" → " class=""></td>
								</tr>
								<tr>
									<td><input type="button" id="wmBL" value=" ↙ " class=""></td>
									<td><input type="button" id="wmBC" value=" ↓ " class=""></td>
									<td><input type="button" id="wmBR" value=" ↘ " class=""></td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
				<hr>
				<div align="center">
					<input type="button" value="已应用 " id="Button_mark"	title="确认水印  " class="highlight" disabled="">
				</div>
			</div>
		</div>
		</aside>

		<article id="canvasContainer" style="width: 1109px; height: 531px;">
		<canvas width="0" height="0"></canvas></article>
	</div>

	<div id="imageLoader" class="box"
		style="display: block; height: 623px;">
		<div id="outputImage" class="topTool"></div>
		<div id="importImage" style="height: 531px;">
			<h3>可以通过以下方式添加图片：</h3>

			<form id="imageForm">
				<div>
					<input type="file" size="18" multiple="multiple" accept="image/jpeg" value="浏览本地图片" id="imLoaderNative">
					<p>仅支持JPG图片文件，且文件小于2M</p>
					<hr>
				</div>
				<input type="hidden" size="20" value="粘贴网络图片链" id="imLoaderWeb"
					disabled="disabled">
			</form>
		</div>
		<div id="gallery" style="width: 1109px; height: 531px;">
			<div id="galleryTitle" style="opacity: 1;">
				<input type="button" value="  全选  " id="galleryAll"> 
				<input type="button" value="  反选  " id="galleryReverse"> 
<!-- 				<input type="button" value="  确定  " id="galleryEnter" />  -->
				<input type="button" value="  删除  " id="galleryDelete"> 
				<input type="button" value="  上传  " id="galleryPost"> 
				<b>提示：双击图片进入编辑状态， 当前正在编辑的媒体是：<?php echo $media_draft_info['location']?></b>
				<p id="galleryMassage" style="display:none;">图片总数：<?php echo count($media_pic_list)?></p>
			</div>
			<div id="imageList">
			<?php if ($media_pic_list!=null) {
				foreach ($media_pic_list as $pic){
					$img =getDataURI($this->config->item ( 'ssi_file_path' ).$pic['pic']);
					if ($img) {
				?>
				<dl><dt><img src="<?php echo getDataURI($this->config->item ( 'ssi_file_path' ).$pic['pic']);?>" ><span><input type="checkbox" checked="checked"><input type="button" class="del" value="删"></span></dt><dd>媒体截图.jpg</dd></dl>
			<?php }
			};
			}?>
			</div>

		</div>
	</div>
	<div id="imageFilter" style="width: 0px; height: 0px; -webkit-transition: all 0.5s ease-in; transition: all 0.5s ease-in;">
		<h3>滤镜样式</h3>
		<ul>
			<li data-m="normal"><img src="../../public/ImageMagic_files/0.jpg"><span>normal</span></li>
			<li data-m="crossprocess"><img src="../../public/ImageMagic_files/1.jpg"><span>crossprocess</span></li>
			<li data-m="lomo"><img src="../../public/ImageMagic_files/2.jpg"><span>lomo</span></li>
			<li data-m="greyscale"><img src="../../public/ImageMagic_files/3.jpg"><span>greyscale</span></li>
			<li data-m="antique"><img src="../../public/ImageMagic_files/4.jpg"><span>antique</span></li>
			<li data-m="sepia"><img src="../../public/ImageMagic_files/5.jpg"><span>sepia</span></li>
			<li data-m="underwater"><img src="../../public/ImageMagic_files/6.jpg"><span>underwater</span></li>
			<li data-m="sunburn"><img src="../../public/ImageMagic_files/7.jpg"><span>sunburn</span></li>
			<li data-m="nightvision"><img src="../../public/ImageMagic_files/8.jpg"><span>nightvision</span></li>
			<li data-m="70s"><img src="../../public/ImageMagic_files/9.jpg"><span>70s</span></li>
			<li data-m="emo"><img src="../../public/ImageMagic_files/10.jpg"><span>emo</span></li>
		</ul>
	</div>
</body>
</html>